<template>
  <div>
    <input 
        v-model="title" 
        type="text" 
        placeholder="请输入你的任务名称，按回车键确认" 
        @keyup.enter="add"
        autofocus
    >
    <button id="addBtn" @click="add">添加</button>
  </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
    name: "MyHeader",
    data () {
        return {
            title: ''      
        }
    },
    methods: {
        add() {
            if (this.title.trim() == '') return;
            let user_title = this.title
            let newObj = {id: nanoid(), title: user_title, done: false}
            this.$emit('received', newObj)
            this.title = ''
        },
        save() {
            localStorage.setItem('todos', JSON.stringify(this.todos))
            alert("保存成功!")
        }
    },
    props: ['todos']
}
</script>

<style scoped>
    input[type=text] {     
        box-sizing: border-box;
        width: 90%;
        height: 30px;
        padding-left: 5px;
        border: 1px solid #bdbdbd;
        border-radius: 3px;
        outline: none;
    }
    input[type=text]:focus {
        border: 2px solid #3751a5;
    }
    button {
        background-color: #008000a8;
        visibility: visible;
    }
    button:hover {
        background-color: #008000eb;
    }
    button:active {
        background-color: #008000a8;
    }
    #addBtn {
        background-color: #34adddc8;
        margin-right: 8px;
        float: left;
    }
    #addBtn:hover {
        background-color: #34addd;
    }
    #addBtn:active {
        background-color: #34adddc8;
    }
</style>